<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../images/logo.ico">
    <link rel="stylesheet" href="../plugin/bootstrap/css/bootstrap.min.css">
    <script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugin/jQuery/jquery-3.6.0.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .w {
            width: 75% !important;
        }

        body,
        html {
            width: 100%;
            height: auto;
        }

        /* 顶栏 */
        header {
            width: 100%;
            height: 100px;
            background-color: #fff;
        }

        header #header {
            height: 100px;
            margin: auto;
        }

        header .header_logo {
            width: 100px;
            height: 100px;
            text-align: center;
            color: rgb(240, 240, 240);
            display: inline-block;
        }

        header .header_logo img {
            height: 70px;
            width: 70px;
            transform: rotate(30deg);
        }

        header .header_logo_text {
            color: rgb(240, 50, 30);
            font-size: 14px;
        }

        header .header_search {
            text-align: center;
            margin-top: 30px;
        }

        header .header_search input {
            width: 500px;
            outline: none;
            padding: 5px 0 5px 15px;
            box-sizing: border-box;
            border: 2px solid rgb(240, 50, 30);
        }

        header .header_search button {
            width: 60px;
            height: 38px;
            margin-left: -5px;
            border: none;
            color: #fff;
            background-color: rgb(240, 50, 30);
        }

        header .header_shoppingCart {
            width: 140px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border: 1px solid rgb(240, 50, 30);
            margin-top: 30px;
        }

        header .header_shoppingCart a {
            text-decoration: none;
            color: #000;
        }

        header .header_shoppingCart img {
            width: 18px;
            height: 16px;
        }

        /* 导航栏 */
        .classify {
            width: 100%;
            height: 46px;
            background-color: rgb(240, 50, 30);
        }

        .classify .nav .nav-link {
            color: #fff;
            font-size: 20px;
            width: 110px;
        }

        /* 底栏 */
        footer {
            width: 100%;
            height: 200px;
            background-color: rgb(240, 240, 240);
            padding: 20px;
        }

        .dkhs {
            height: 80px;
        }

        .dkhs span {
            display: inline-block;
            width: 39px;
            height: 46px;
            background: url(../images/多快好省.png) no-repeat;
            vertical-align: middle;
            margin-right: 5px;
        }

        .dkhs span.item1 {
            background-position: 0px -190px;
        }

        .dkhs span.item2 {
            background-position: -40px -190px;
        }

        .dkhs span.item3 {
            background-position: -82px -190px;
        }

        .dkhs span.item4 {
            background-position: -123px -190px;
        }

        footer hr {
            margin-top: -10px;
        }
    </style>
</head>

<body>
    <!-- 顶栏 -->
    <header>
        <div id="header" class="row w justify-content-around">
            <!-- logo图 -->
            <div class="header_logo col-1">
                <img src="../images/logo_maple2.png" alt="...">
                <div class="header_logo_text">
                    Maple Leaf
                </div>
            </div>
            <!-- 搜索框 -->
            <div class="header_search col-7">
                <input type="text">
                <button>搜索</button>
            </div>
            <!-- 购物车 -->
            <div class="col-2 header_shoppingCart">
                <a href="./files/shoppingCart.html">
                    <img src="../images/购物车_shopping.png" alt="">
                    我的购物车
                </a>
            </div>
            <div class="col-2 header_shoppingCart">
                <a href="./files/shoppingCart.html">
                    <img src="../images/_订单.png" alt="">
                    我的订单
                </a>
            </div>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav class="classify">
        <div class="row w m-0 mx-auto">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">数码</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">家居</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">服饰</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">食品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">医疗</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">图书</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">钟表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">珠宝</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">护肤</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">户外</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 主体部分 -->
    <main>
      
    </main>

    <!-- 底栏 -->
    <footer class="text-center">
        <div class="row dkhs w mx-auto">
            <div class="col-3"><span class="item1"></span> 品类齐全，轻松购物</div>
            <div class="col-3"><span class="item2"></span> 多仓直发，极速配送</div>
            <div class="col-3"><span class="item3"></span> 正品行货，精致服务</div>
            <div class="col-3"><span class="item4"></span> 天天低价，畅选无忧</div>
        </div>
        <hr>
        <p>Copyright © 2022 深圳技师学院枫叶小组（Maple Leaf Team） 版权所有</p>
        <p>项目研发小组所在地址：深圳市龙岗区龙城街道将军帽路深圳技师学院</p>
    </footer>
</body>

</html>